<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :data="params"
      :action="upload.url"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-error="uploadFile"
    >
    </el-upload>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>配置管理</el-breadcrumb-item>
      <el-breadcrumb-item>配置列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <!--工具条-->
      </el-row>
      <div class="update-version-wrap">
      <!-- <el-upload
      action="#"
      :http-request="requestUpload"
      :show-file-list="false"
      :before-upload="beforeUploadNew"
    >
      <el-button size="small" type="primary">上传更新包</el-button>
    </el-upload> -->
    <el-button size="small" type="primary" @click="changeImg()">上传更新包</el-button>
    <el-button size="small" type="primary" @click="refunsh('wgt')">更新wgt</el-button>
    <el-button size="small" type="primary" @click="refunsh('apk')">更新apk</el-button>
    <el-button size="small" type="primary" @click="refunsh('ipa')">更新ipa</el-button>
    <el-button size="small" type="primary" @click="deleteapp('wgt')">删除wgt</el-button>
    <el-button size="small" type="primary" @click="deleteapp('apk')">删除apk</el-button>
    <el-button size="small" type="primary" @click="deleteapp('ipa')">删除ipa</el-button>
    </div>
      <!-- <el-table :data="userlist" style="width: 100%">
        <el-table-column
          :prop="remark ? remark : description"
          label="名称"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-if="scope.row.status == 0"
              size="mini"
              @click="showEditJiefeng(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table> -->
      <el-table
        ref="multipleTable"
        :data="userlist"
        border
        stripe
        style="width: 100%"
        @sort-change="changeSort"
        id="out-table"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="remark" label="名称"></el-table-column>
        <el-table-column prop="remark" label="参数">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.paramValue"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column
          </template>

        </el-table-column>

          v-if="remark"
          prop="remark"
          label="名称"
        ></el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="saveInfo(scope.row)"
              >保存</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
    </el-card>
  </div>
</template>
<script>
  const qiniu = require('qiniu-js')
export default {
  name: "realList",
  data() {
    return {
      searchfrom: {
        queryString: "",
        queryType: 0,
        pageNo: 1,
        pageSize: 10,
      },
      userlist: [],
      upload: {
        url: "",
        token: "",
        domain: "",
      },
      params: {
        token: "",
        key: "",
      },
      loading:null,
    };
  },
  created() {
    this.getConfiglist();
    this.qiNiuYun();
  },
  methods: {
    // 上传预处理
    beforeUploadNew(file) {
      console.log(file);
      let formData = new FormData();
      formData.append("file", file);
      const loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

      this.$http.post('/manage/conf/pack',formData).then((res) => {
        console.log(res);
        loading.close();
        if (res.data.status == 1) {


          this.$message({
            message: "上传成功",
            type: "success",
          });

        } else {

          this.$message({
            showClose: true,
            message: res.data.message,
            type: "error",
          });
        }
      }).catch(error=>{
        loading.close();
      })
    },
    refunsh(name) {
      this.$http.get('https://www.uueden.com/pack/buc/'+name,{}).then((res) => {
        this.$message({
          showClose: true,
          message: res,
          type: "success",
        });
      })
    },
    deleteapp(name) {
      this.$http.get('https://www.uueden.com/pack/buc/delete/'+name,{}).then((res) => {
        this.$message({
          showClose: true,
          message: res,
          type: "success",
        });
      })
    },
    beforeUploadDetails(file) {
      console.log(file);

      this.params.key = file.name;
      // const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      // const isLt10M = file.size / 1024 / 1024 < 10;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
    },
    uploadSuccess(resp, file, fileList) {
      console.log(resp, file, fileList);
      // this.imgUpload(fileList, 3);

      this.hotUpdateUrl = this.upload.domain + resp.hash;
      console.log(this.hotUpdateUrl, "更新包地址");
      // uploadPack().then((res) => {
      //   console.log(res);
      //   if (res.code == 200) {
      //     this.dialogTableVisible = false;

      //     this.$message({
      //       message: "上传成功",
      //       type: "success",
      //     });
      //     this.getvresions();
      //   } else {
      //     this.dialogTableVisible = false;
      //     this.$message({
      //       showClose: true,
      //       message: res.data.message,
      //       type: "error",
      //     });
      //   }
      // });
    },
    qiNiuYun() {
      this.$http.post("/userFile/qiNiuUpload", {}).then((res) => {
        console.log(res);
        this.upload.token = res.data.data.token;
        this.upload.domain = res.data.data.domain;
        this.upload.url = res.data.data.upload_url;
        this.params.token = res.data.data.token;
        console.log(this.upload);
      });
    },
    updateConfig() {
      this.$http.post("/manage/conf/edit", {}).then((res) => {
        // console.log(res)
        if (res.data.status == 1) {
          // this.$message({
          //   message: status == 0 ? "已同意" : "已拒绝",
          //   type: "success",
          // });

          this.getConfiglist();
        }
      });
    },
    searchDrow(e) {
      console.log(e);
      this.searchfrom.queryType = e;
      this.searchfrom.pageNo = 1;
      this.getConfiglist();
    },
    saveInfo(item) {

      this.$confirm('确认修改该项配置？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/manage/conf/edit", {
              id:item.id,
              paramValue:item.paramValue
            })
            .then((res) => {
              // console.log(res)
              if (res.data.status == 1) {
                this.$message({
                  message:'修改成功',
                  type: "success",
                });

                this.getConfiglist();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    getConfiglist() {
      this.$http.post("/manage/conf/list", {}).then((res) => {
        console.log(res.data);
        if (res.data.status == 1) {
          this.userlist = res.data.data;
          console.log(this.dataList);
        }
      });
    },
    searchUserList() {
      this.searchfrom.createDate = this.formatTime(this.value1);
      this.searchfrom.pageNo = 1;
      this.getConfiglist();
    },
    // 监听 pagesize 的变化
    handleSizeChange(newSize) {
      // 把最新的 pagesize 赋值给 this.queryinfo
      this.searchfrom.pageSize = newSize;
      this.getConfiglist();
    },
    // 监听 页码值 的变化
    handleCurrentChange(newPageNum) {
      console.log(newPageNum);
      this.searchfrom.pageNo = newPageNum;
      this.getConfiglist();
    },
    changeImg(rows, imgName) {
      document.getElementsByClassName("el-upload__input")[0].click();
    },
    uploadFile() {
      this.qiNiuYun();
      this.$message.error("上传失败，请重试");
    },
    beforeAvatarUpload(file) {
      this.params.key = file.name;
      this.loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    },
    handleAvatarSuccess(res, file) {
      this.loading.close();
    },
  },
};
</script>
<style lang="">
  .update-version-wrap {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
